<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>配置用户角色</title>
    <base href="<%=basePath%>"/>
    <%@ include file="../../cuv_include.jsp"%>
    <style type="text/css">  
        select   
        {   
            width: 100%;               
            height: 160px;   
        }   
        #div1, #div2, #div3   
        {   
            float: left;   
        }   
        #div1, #div3   
        {   
            width: 150px;   
        }   
        #div2   
        {   
            width: 120px;   
        }   
        .btn   
        {   
            display: block;   
            margin: 10px auto;   
            width: 80px;   
        }   
    </style> 	
    <script type="text/javascript">  
    	$(document).ready(function() {
    		$.ajaxSetup ({ cache:false });
    	});
    
    	/* 将option从src移向desc */
        function Move(src, dest) {
            var srcOptions = $("#"+ src +" option:selected");
            $(srcOptions).each(function(){
                $(this).removeAttr("selected");
            });
            $(srcOptions).remove();
            $("#"+dest).append(srcOptions);
        }   
    	
        /* 将全部option从src移向desc */
        function MoveAll(src, dest) {
        	var srcOptions = $("#"+ src +" option");
            $(srcOptions).each(function(){
                $(this).removeAttr("selected");
            });
            $(srcOptions).remove();
            $("#"+dest).append(srcOptions);            
        }
        
        function btn_submit() {
        	var arrayObj = new Array();
        	var srcOptions = $("#userRole option");
            $(srcOptions).each(function(){
                arrayObj.push($(this).attr("value"));
            });
            
            var data = arrayObj.join(";");
            var enname = "${enname}";
            
            $.post("system/user/role.do", {roles:data, enname:enname}, function(result){
            	var re = $.parseJSON(result);
            	if(re.code != 1) alert(re.msg);
            	else window.location.href="<%=basePath%>system/user/list.do?" + "${qs}";
            });
		}
    </script>     
  </head>
  
  <body>
    <h3>${enname} 配置角色：</h3>
    <div id="div1">  
      <select id="allRole" name="allRole" size="15" multiple="multiple"> 
        <c:forEach var="role" items="${diffRoles}" varStatus="status">
           <option value="${role.enname}">${role.alias}</option>
        </c:forEach>
      </select>  
    </div>  
    <div id="div2">  
        <input type="button" value="&gt;" class="btn" onclick="Move('allRole','userRole')" />  
        <input type="button" value="&gt;&gt;" class="btn" onclick="MoveAll('allRole','userRole')" />
        <input type="button" value="&lt;" class="btn" onclick="Move('userRole','allRole')" />  
        <input type="button" value="&lt;&lt;" class="btn" onclick="MoveAll('userRole','allRole')" />
    </div>  
    <div id="div3">  
        <select id="userRole" name="userRole" size="15" multiple="multiple">  
        <c:forEach var="role" items="${userRoles}" varStatus="status">
           <option value="${role.enname}">${role.alias}</option>
        </c:forEach>        
        </select>  
    </div> 
    <div style="clear: both;"></div>
    <div style="margin-top:10px;">
      <input id="btn_submit" type="button" value="提交" onclick="btn_submit();" style="width: 80px;" />
      <input id="btn_back" type="button" value="返回" onclick="history.back();" style="width: 80px;" />
      <span style="color: red;">(提示：按住Ctrl或Shift可以多选！)</span>
    </div>   
  </body>
</html>